<template>
	<view class="activityPage">
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<uni-nav-bar height="88rpx" fixed title="活动" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<mescroll-body :sticky="true" ref="mescrollRef" :top="mescroll_top" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption">
			<view style="height: 20rpx; background-color: white;"></view>
			<view class="searchBox">
				<u-search placeholder="搜索关键词" height="60rpx" v-model="listObj.activityName" :showAction="true"
					@search="downCallback" @custom="downCallback"></u-search>
				<!-- <view class="searchInput"></view> -->
			</view>
			<view class="tabs">
				<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="tabSelect(item.id)">
					<text class="itemText" :class="{itemTextCur:index === tabCur}">
						{{ item.title }}
					</text>
				</view>
			</view>
			<view class="flex-column flex-center" style="margin-top: 200rpx;"
				v-if="!dataList.listObj[2]&&!dataList.listObj[0]&&!dataList.listObj[1]">
				<image src="@/static/activity/none.png" style="width: 204.08rpx;height: 229.42rpx;">
				</image>
				<view class="" style="margin-top: 20rpx;font-size: 28rpx;color: #666666;">
					哎呀！暂时未找到你要搜索的结果...
				</view>
			</view>
			<view class="bodyContentBox" v-else>
				<view class="" v-if="tabCur === 0||tabCur === 1">
					<view class="typeBlockBox">
						<view class="typeBlockTitle">单次活动</view>
						<view class="titleRow-right">
							<view class="moreText" @click="goto('activity/activityList/activityList',{type:2})">查看更多
								<!-- <uni-icons type="right" color="#999999" size="28rpx"></uni-icons> -->
							</view>
						</view>
					</view>
					<view class="content-rowBox">
						<!-- <view class="rowBox-item" v-for="(item,index) in dataList.listObj[2]" :key="index"
						@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
						<view class="itemImg">
							<imageSwiper :autoplay="false" :imgs="item.activityFile" class="img"></imageSwiper>
						</view>
						<view class="itemTitle">
							<view class="u-line-1">{{item.activityName}}</view>
						</view>
						<view class="rowBox-bottom">
							<view class="itemIntegral">积分：{{item.activityScore}}</view>
							<view class="itemTypeText"></view>
						</view>
					</view> -->
						<view class="content-cloumnBox">
							<view class="cloumnItem flex-column" v-for="(item,index) in dataList.listObj[2]"
								:key="index" @click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
								<view class="flex-row">
									<view class="cloumnImg">
										<view :class="item.activityState == 2?'statusText2':'statusText1'">
											{{item.activityState == 2?'已结束':
											item.activityState == 1?'进行中':'报名中'}}
										</view>
										<imageSwiper :imgs="item.activityFile" class="img"></imageSwiper>
									</view>
									<view class="cloumnItem-left">
										<view class="cloumnTitle">
											<view class="u-line-1">{{item.activityName}}</view>
										</view>
										<view class="cloumnTimeBox">
											<image src="@/static/common/timeIcon.png" class="cloumnTimeIcon"></image>
											<view class="cloumnTime" v-if="item.startTime">
												{{setTime(item.startTime)}}~{{setTime(item.endTime)}}
											</view>
										</view>
										<view class="cloumnTimeBox">
											<image src="@/static/activity/activityPlace.png" class="cloumnTimeIcon">
											</image>
											<view class="cloumnTime">
												{{item.address||'无'}}
											</view>
										</view>
									</view>

								</view>
								<view class="flex-between bottomBlock">
									<view class="cloumnIntegral flex-row flex-alignCenter" style="margin-top: ;">
										<span style="color:#86909C">积分： </span>
										<image src="@/static/activity/activityScore.png" class="cloumnTimeIcon2">
										</image>
										{{item.activityScore}}
									</view>
									<view class="button flex-center">
										进入活动
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="" v-if="tabCur === 0||tabCur === 2">
					<view class="typeBlockBox">
						<view class="typeBlockTitle">周期活动</view>
						<view class="titleRow-right">
							<view class="moreText" @click="goto('activity/activityList/activityList',{type:0})">查看更多
								<!-- <uni-icons type="right" color="#999999" size="28rpx"></uni-icons> -->
							</view>
						</view>
					</view>
					<view class="content-cloumnBox">
						<view class="cloumnItem flex-column" v-for="(item,index) in dataList.listObj[0]" :key="index"
							@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
							<view class="flex-row">
								<view class="cloumnImg">
									<view :class="item.activityState == 2?'statusText2':'statusText1'">
										{{item.activityState == 2?'已结束':
										item.activityState == 1?'进行中':'报名中'}}
									</view>
									<imageSwiper :imgs="item.activityFile" class="img"></imageSwiper>
								</view>
								<view class="cloumnItem-left">
									<view class="cloumnTitle">
										<view class="u-line-1">{{item.activityName}}</view>
									</view>
									<view class="cloumnTimeBox">
										<image src="@/static/common/timeIcon.png" class="cloumnTimeIcon"></image>
										<view class="cloumnTime" v-if="item.startTime">
											{{setTime(item.startTime)}}~{{setTime(item.endTime)}}
										</view>
									</view>
									<view class="cloumnTimeBox">
										<image src="@/static/activity/activityPlace.png" class="cloumnTimeIcon">
										</image>
										<view class="cloumnTime">
											{{item.address||'无'}}
										</view>
									</view>
								</view>

							</view>
							<view class="flex-between bottomBlock">
								<view class="cloumnIntegral flex-row flex-alignCenter" style="margin-top: ;">
									<span style="color:#86909C">积分： </span>
									<image src="@/static/activity/activityScore.png" class="cloumnTimeIcon2">
									</image>
									{{item.activityScore}}
								</view>
								<view class="button flex-center">
									进入活动
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="" v-if="tabCur === 0||tabCur === 3">
					<view class="typeBlockBox">
						<view class="typeBlockTitle">问卷调查</view>
						<view class="titleRow-right">
							<view class="moreText" @click="goto('activity/activityList/activityList',{type:1})">查看更多
								<!-- <uni-icons type="right" color="#999999" size'="28rpx"></uni-icons> -->
							</view>
						</view>
					</view>
					<view class="content-cloumnBox">
						<view class="cloumnItem flex-column" v-for="(item,index) in dataList.listObj[1]" :key="index"
							@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
							<view class="flex-row">
								<view class="cloumnImg">
									<view :class="item.activityState == 2?'statusText2':'statusText1'">
										{{item.activityState == 2?'已结束':
										item.activityState == 1?'进行中':'报名中'}}
									</view>
									<imageSwiper :imgs="item.activityFile" class="img"></imageSwiper>
								</view>
								<view class="cloumnItem-left">
									<view class="cloumnTitle">
										<view class="u-line-1">{{item.activityName}}</view>
									</view>
									<view class="cloumnTimeBox">
										<image src="@/static/common/timeIcon.png" class="cloumnTimeIcon"></image>
										<view class="cloumnTime" v-if="item.startTime">
											{{setTime(item.startTime)}}~{{setTime(item.endTime)}}
										</view>
									</view>
									<view class="cloumnTimeBox">
										<image src="@/static/activity/activityPlace.png" class="cloumnTimeIcon">
										</image>
										<view class="cloumnTime">
											{{item.address||'无'}}
										</view>
									</view>
								</view>

							</view>
							<view class="flex-between bottomBlock">
								<view class="cloumnIntegral flex-row flex-alignCenter" style="margin-top: ;">
									<span style="color:#86909C">积分： </span>
									<image src="@/static/activity/activityScore.png" class="cloumnTimeIcon2">
									</image>
									{{item.activityScore}}
								</view>
								<view class="button flex-center">
									进入活动
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</mescroll-body>

	</view>
</template>

<script>
	import * as activityApi from "@/api/activity.js"
	import * as systemApi from "@/api/system.js"
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	let activity_Search = {
		endTime: '',
		search: '',
		startTime: '',
		status: -2,
	}
	export default {
		mixins: [MescrollMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		// components: {
		// 	searchRow
		// },
		data() {
			return {
				tabCur: 0, // 当前tabs下标
				tabList: [{
						id: 0,
						title: '全部'
					}, {
						id: 1,
						title: '单次活动'
					},
					{
						id: 2,
						title: '周期活动'
					},
					{
						id: 3,
						title: '问卷活动'
					},
				],
				area: '鳌江',
				activityState: '报名中',
				openName: '',
				pickerShow: false,
				mescroll_top: '0rpx',
				userInfo: {
					userName: '',
					roles: [{
						roleName: '',
						roleId: '',
						roleKey: ''
					}],
					avatar: '',
					nickName: '',
					sex: 2
				},
				activityTabs: [{
					"label": "全部",
					"text": "全部",
					"value": "",
				}, {
					"label": "已报名",
					"text": "已报名",
					"value": "0",
				}, {
					"label": "已结束",
					"text": "已结束",
					"value": "2",
				}],
				tabsStyle: {
					height: '88rpx',
					boxSizing: 'border-box'
				},
				applyTypeList: ['全部退款', '换货', '已发货退货退款', '未发货退货退款 '],
				tabsAStyle: {
					color: '#6FA9FF'
				},
				tabs: [{
						name: '未使用',
						id: 0
					},
					{
						name: '已使用 ',
						id: 1
					},
					{
						name: '已过期',
						id: 2
					},

				],
				tabIndex: 0,
				tabIndexOld: 0,
				options: {},
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 8 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '--这里是底线--',
					empty: {
						tip: '暂无' // 提示
					}
				},
				dataList: {
					listObj: {},
					rows: [],
					pages: 0,
					size: 0,
					total: 0,
					current: 0,
					pageSize: 1,
					pageNum: 10,
				}, //列表数据
				listObj: {
					activityName: '',
					// activityType: 0,
					// activityState: '0'
				},
				canReset: false,
				dicts: {
					event_type: {},
					event_state: {},
					residence_area: {}
				},
				dictList: {
					event_type: [],
					event_state: [],
					residence_area: []
				},
				myActivitys: {
					total: 0,
					rows: []
				}
			}
		},
		mounted() {
			const that = this
			// // #ifdef MP
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		that.mescroll_top = 88 + 88 + res.statusBarHeight * 2 + 'rpx'
			// 	}
			// })
			// // #endif
			if (this.$store.getters.platform === 'H5-WEIXIN') {
				that.mescroll_top = 0 + 'rpx'
			} else {
				uni.getSystemInfo({
					success: function(res) {
						that.mescroll_top = 0 + res.statusBarHeight * 2 + 'rpx'
					}
				})
			}
		},
		onLoad(options) {
			this.options = options
			this.getDictDataList('event_state')
			this.getDictDataList('event_type')
			// this.getDictDataList('residence_area').then((res) => {
			// 	this.area = res.rows[0].dictLabel
			// })
		},
		onShow() {
			this.getUserInfo()
			// that.canReset && that.getData()
			// that.canReset = true
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
			},
			setTime(timeStr) {
				return timeStr.split(' ')[0]
			},
			getMyActivity() {
				activityApi.enrollListOfUser().then(res => {
					this.myActivitys.rows = res.rows
					this.myActivitys.total = res.total
					console.log(res);
				})
			},
			getUserInfo() {
				const that = this
				this.$store.dispatch('userBaseInfo').then(res => {
					console.log(res.user);
					this.userInfo = res.user
					this.eliteInfo = res.eliteInfo
					if (that.userInfo.userType == "yk") {
						// that.rzShow = true
						this.ykInfo = res.ykInfo
					}
					this.getMyActivity()
					console.log(this.userInfo.userType == "yk", that.rzShow);
				})
			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = {
								label: item.dictLabel,
								color: `rgb(${item.remark||'57,137,248'})`,
								background: `rgba(${item.remark||'57,137,248'},0.1)`
							}
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			confirmPicker({
				value
			}) {
				const openName = this.openName
				this[openName] = value[0].label
				this.pickerShow = false
				this.openName = ''
				if (openName == 'activityState') {
					this.listObj.activityState = value[0].value
				}
				this.downCallback()
			},
			closePicker() {
				this.openName = ''
				this.pickerShow = false
			},
			openPicker(openName, data = []) {
				this.openName = openName
				this.columns = [data]
				this.pickerShow = true
			},
			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			},
			//手动刷新
			getData() {
				let curMescroll = this.$refs.mescrollRef.mescroll
				curMescroll && curMescroll.resetUpScroll()
				curMescroll && curMescroll.scrollTo(0, 0)
			},
			tabsChange(e) {
				console.log(e)
				this.tabIndexOld = this.tabIndex
				this.tabIndex = e.index
				this.listObj.activityType = e.value
				uni.setStorageSync('activity_Search', JSON.stringify({
					activityType: this.listObj.activityType,
				}))
				this.getData()
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const that = this
				if (that.$store.getters.token) {
					// if (uni.getStorageSync('activity_Search')) {
					// 	const activity_Search = JSON.parse(uni.getStorageSync('activity_Search'))
					// 	that.listObj.activityType = activity_Search.activityType
					// }
					this.getDataList({
						pageNum: page.num,
						pageSize: page.size,
						...this.listObj
					}).then(list => {
						const curPageLen = 1
						const totalSize = 10
						that.mescroll.endBySize(curPageLen, totalSize)
					}).catch(err => {
						that.mescroll.endErr()
					})
				} else {
					that.mescroll.endBySize(0, 0)
					return
				}
			},
			/**
			 * @param {Object} page 页码
			 */
			getDataList(pageObj) {
				const that = this
				return new Promise((resolve, reject) => {
					activityApi.listOfNew(pageObj).then(({
						data
					}) => {
						let dataList = JSON.parse(JSON.stringify(that.dataList))
						// 合并新数据
						const newObj = data
						// 如果是第一页需手动制空列表
						if (pageObj.pageNum == 1) dataList.listObj = {}
						// 合并新数据
						dataList.listObj = newObj
						that.dataList = dataList
						resolve(that.dataList)
					}).catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 36rpx;
		background: #ff0000;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.tabs {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 32rpx;
		background-color: #FFF;
		color: #A9A9A9;
	}

	.tabItem {
		width: 250rpx;
		height: 114rpx;
		line-height: 100rpx;
		color: #ffA9A9;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 30rpx;
	}


	.itemText {
		color: #000000;
	}

	.itemTextCur {
		font-weight: 700;
		color: #008AFF;
		border-bottom: 2px solid #008AFF;
	}
</style>
<style lang="scss" scoped>
	@import '@/pages/activity/activity.scss';

	page,
	body {
		background-color: #F4F7FF;
	}

	.activityPage {
		background-color: #F4F7FF;

		.searchBox {
			background-color: #fff;
			padding: 20rpx 30rpx;
		}

		.bodyContentBox {
			padding: 0 30rpx;
			padding-bottom: 30rpx;
		}

		.typeBlockBox {
			padding-top: 40rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.typeBlockTitle {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #000000;
				width: 100%;

			}

			.titleRow-right {
				flex-shrink: 0;
				margin-left: 10rpx;

				.moreText {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.titleRow-right-img {}
			}
		}

	}
</style>